<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width" />
<title>文章阅读</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="css/master.css" />
<link rel="stylesheet" href="css/gloable.css" />
<link rel="stylesheet" href="css/nprogress.css" />
<link rel="stylesheet" href="css/blog.css" />

<link rel="stylesheet"
	href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
<script
	src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
<script src="js/showdown.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/yss/gloable.js"></script>
<script src="js/plugins/nprogress.js"></script>
<script src="js/pagecomment.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>


</head>
<body>
	<div class="header"></div>
	<header class="gird-header">
		<div class="header-fixed">
			<div class="header-inner">
				<a href="javascript:void(0)" class="header-logo" id="logo">Mr.Yss</a>
				<nav class="nav" id="nav">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="article.html">博客</a></li>
						<li><a href="message.html">留言</a></li>
						<li><a href="link.html">友链</a></li>
					</ul>
				</nav>
				<a href="#" class="blog-user"> <i class="fa fa-qq"></i>
				</a> <a class="phone-menu"> <i></i> <i></i> <i></i>
				</a>
			</div>
		</div>

	</header>
	<div id="content"></div>
	<div class="clearfix"></div>
	<div class="doc-container" id="doc-container">
		<div class="container-fixed">
			<div class="col-content" style="width:100%">
				<div class="inner">
					<article class="article-list">
						<section class="article-item">
							<div id="contents"></div>
							
							<!-- 留言开始 -->
							<div class="mt20">
								<ul class="message-list" id="message-list">
									<li class="zoomIn article">
										<div class="replycontainer layui-hide">
											<form class="layui-form" action="">
												<input type="hidden" name="remarkId" value="1"> <input
													type="hidden" name="targetUserId" value="0">
												<div class="layui-form-item">
													<textarea name="replyContent" lay-verify="replyContent"
														placeholder="请输入回复内容" class="layui-textarea"
														style="min-height:80px;"></textarea>
												</div>
												<div class="layui-form-item">
													<button class="layui-btn layui-btn-xs"
														lay-submit="formReply" lay-filter="formReply">提交</button>
												</div>
											</form>
										</div>
									</li>
								</ul>
							</div>
							<!-- 留言结束 -->
							<div class="f-cb"></div>
							<br></br>

							<div class="textarea-wrap message" id="textarea-wrap">
								<div class="layui-form-item">
									<textarea id="message" placeholder="请输入内容"
										class="layui-textarea "></textarea>
								</div>
								<div class="layui-form-item">
									<button class="layui-btn" onclick="message()">提交留言</button>
								</div>
							</div>
						</section>
					</article>
				</div>
			</div>
		</div>
	</div>
	<footer class="grid-footer">
		<div class="footer-fixed">
			<div class="copyright">
				<div class="info">
					<div class="contact">
						<a href="javascript:void(0)" class="github" target="_blank"><i
							class="fa fa-github"></i></a> <a
							href="https://wpa.qq.com/msgrd?v=3&uin=1278028562&site=qq&menu=yes"
							class="qq" target="_blank" title="1278028562"><i
							class="fa fa-qq"></i></a> <a
							href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw"
							class="email" target="_blank" title="1278028562@qq.com"><i
							class="fa fa-envelope"></i></a> <a href="javascript:void(0)"
							class="weixin"><i class="fa fa-weixin"></i></a>
					</div>
					<p class="mt05">Copyright &copy; 2019 侯晓铮 All Rights Reserved
						V.1.0.0</p>
				</div>
			</div>
		</div>
	</footer>
	<script>
		//获取url参数
		function getUrlParam(name) {
			//构造一个含有目标参数的正则表达式对象  
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			//匹配目标参数  
			var r = window.location.search.substr(1).match(reg);
			//返回参数值  
			if (r != null) return unescape(r[2]);
			return null;
		}
		window.onload = function() {
			var converter = new showdown.Converter();
			var id = getUrlParam("id");
			$(document).ready(function() {
				$.ajax({
					url : "/blog/article/detail?id=" + id, //后台请求的数据
					dataType : "json", //数据格式 
					type : "post", //请求方式
					async : true, //是否异步请求
					success : function(data) {
						var html = converter.makeHtml(data.article.article.content);
						console.log(html);
						//文章内容展示
						$("#contents").append(
							"<aside class='title' style='line-height:1.5;'>"
							+ "<span class='fc-blue'>" + "【原创】" + "</span>"
							+ "<h4>" + data.article.article.title + "</h4>"
							+ "<p class='fc-grey fs-14'>"
							+ "<small> 作者：<a href='javascript:void(0)' target='_blank' class='fc-link'>" + data.article.article.add_name + "</a>"
							+ "</small> <small class='ml10'>围观群众数：<i class='readcount'>" + data.article.article.viewnum + "</i></small> "
							+ "<small class='ml10'>更新于 <label>" + data.article.article.date + "</label> </small> </p>"
							+ "<p >" + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + data.article.article.content + "</p>"
							+ "</aside>"
							+ "<div class='content artiledetail' id='content' style='border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;'>"
							+ "<div class='copyright mt20'>"
							+ "<p class='f-toe'></p>"
							+ "<p class='f-toe fc-black'>非特殊说明，本文版权归侯晓铮 所有，转载请注明出处.</p>"
							+ "<p class='f-toe'>"
							+ "</p>"
							+ "</div>"
							+ "	<div id='aplayer' style='margin:5px 0'></div>"
							+ "<h6>评论专区</h6>"
							+ "	</div>"
						);
	
					}
				})
			});
			//get评论List
			var articleId = getUrlParam("id");
			$(document).ready(function() {
				$.ajax({
					url : "/blog/comments/getComments?articleId=" + articleId, //后台请求的数据
					dataType : "json", //数据格式 
					type : "post", //请求方式
					async : true, //是否异步请求
					success : function(data) {
						//文章内容展示
						$.each(data, function(i, ls) {
							$("#message-list").append(
								"<div class='mt20'>"
								+ "<ul class='message-list' id='message-list'>"
								+ "<li class='zoomIn article'>"
								+ "<div class='comment-parent'>"
								+ "<div class='comment-content'>"
								+ "<span class='username' style='font-size:20px;'>" + ls.user.username + ""
								+ ":&nbsp</span>" + ls.content + "</div>"
								+ "<p class='info info-footer'>"
								+ "<i class='fa fa-map-marker' aria-hidden='true'></i> <span>保定 </span>"
								+ "<span class='comment-time'>" + ls.createTime + " &nbsp" + "</span>"
								+ "<a href='javascript:;' class='btn-reply' data-targetid='1' data-targetname='燕十三'>回复</a>"
								+ "</p>"
								+ "</div>"
								+ "</li></ul>"
							);
						});
					}
				})
			})
		};
	
		function message() {
			var articleId = getUrlParam("id");
			var content = $("#message").val();
			if (content == null || content == "") {
				alert("请输入内容！");
				return false;
			}
			var data = {
				articleId : articleId,
				content : content
			};
			$.ajax({
				type : "post",
				url : '/blog/comments/addComments',
				data : data,
				dataType : 'json',
				success : function(data) {
					//alert(msg);
					if (data.success == 1) {
						alert("评论成功！")
						window.location.reload();
					} else {
						alert("登录成功")
	
					}
				}
			});
		}
	</script>
</body>
</html>
